@charset "utf-8";

@import "_reset";

.web{
    background: #fafafa;
    //顶部
    header{
       position: relative;
        background: #FFFFFF;
        .top {
            width: 1200px;
            margin: 0 auto;
            position: relative;
//          border-bottom: 1px solid #e5e5e5;
            height: 60px;
            .top_logo {
                float: left;
//             
                text-align: center;
                display: inline-block;
                margin-top: 11px;
                a {
                    >img {
                        height: 40px;
                        vertical-align: middle;
                    }
                }
            }
            .top_ico {
                float: right;
                margin-top: 18px;
                a {
                    font-size: 23px;
                }
            }
            .ico_xia {
                display: none;
                z-index: 11;
                width: 270px;
                background: #FFFFFF;
                overflow: hidden;
                border-radius: 4px;
                position: absolute;
                right: -20px;
                padding: 10px 0;
                box-shadow: 0 1px 2px 0 rgba(102, 102, 102, .5);
                >li {
                    display: block;
                    padding: 18px 0;
                    margin: 0 28px;
                    border-bottom: 1px rgba(0, 0, 0, .082) solid;
                    &:nth-child(4) {
                        border: 0;
                    }
                    >a {
                        font-size: 15px;
                        color: #333;
                        display: block;
                        overflow: hidden;
                        b {
                            font-size: 20px;
                            margin: 0 20px 0 10px;
                            display: inline-block;
                        }
                        span {
                            display: inline-block;
                            vertical-align: top;
                        }
                    }
                }
            }
        }
    }
    .nav{
        margin-left: 135px;
        margin-top: 22px;
        display: inline-block; 
        li{
            float:left;
            margin-right: 56px;
           }
         a{
            color: #4e4e4e;
            font-size: 14px;
            &:hover{
                color: #868686;
            }
        }
    }
    .nav_neirong{
        width: 100%;
        position: absolute;
        display: none;
        background: #F2F2F2;
        z-index: 100;
        ul{
            width: 912px;
            margin:0 auto;
            padding-top: 25px;
            
            li{
                display: inline-block;
                text-align: center;
                font-size:16px;
                font-weight: 400;
                color:#333333;
                
               &:first-child{
                   float:left;
               }
               &:first-child{
                   >a{
                       display: inline-block;   
                       overflow: hidden;
                       >img:hover{
                           transform: scale(1.1);
                           -webkit-transition: all 500ms linear;
                       }
                   }
               }
           }
            .nav_xx{
                width: 149px;
                height: 151px;
                background: #FFFFFF;
                float: right;
                margin-left: 18px;
                margin-bottom: 18px;
                 >a{
                       display: inline-block;   
                       overflow: hidden;
                       >img:hover{
                           transform: scale(1.05);
                           -webkit-transition: all 500ms linear;
                       }
                   }
            }
        }
    }
    .top_ico{
        margin-left: 163px;
        display: inline-block;
    }
    //底部
    footer{
    background: white;
    width: 100%;
    padding-bottom: 60px;
    .icc{
        width: 895px;
        margin: 0 auto;
        display: flex;
        padding-top: 73px;
        padding-bottom: 76px;
        li{
            margin: 0 20px;
            color: #666;
            width: 106px;
            text-align: center;
                >i{
                    display: block;
                    font-size: 30px;
                    margin-bottom: 14px;
                    font-weight: 400;
                }
                span{
                    font-size: 14px;
                    font-weight: 400;
                } 
            }
       }
    .footer_box{
        width: 1200px;
        margin: 0 auto;
        }
    .foot_le{
        float: left;
        padding-left: 12px;
        padding-top: 61px;
        width: 744px;
        padding-bottom: 62px;
        dl{
            float: left;
            width:140px;
            margin-right: 42px;
            dt{
                font-size:14px;
                color:#3c3c3c;
                display: inline-block;
                margin-bottom: 17px;
                }
            dd{
                list-style: none;
                   a{
                        font-size:14px;
                        color: #8a8a8a;
                        display:block;
                        line-height: 30px;
                        letter-spacing: 1px;
                    }
                  }
                
            }
        }
    .foot_ri{
        margin-top:57px ;
        float: right;
        text-align: right;
        vertical-align: middle;
        section{
            margin-top: -5px;
            margin-bottom: 20px;
            a{
                display: block;
                text-align: center;
                background: #666666;
                width: 173px;
                color: #fff;
                height: 51px;
                line-height: 51px;
                border-radius: 25px;
                b{
                    font-size: 29px;
                }
                >span{
                    color:white;
                    font-size:15px;
                    display: inline-block;
                    vertical-align: top;
                }
            }
          }
        h3{
            color: #333333;
            font-size:24px;
            display: block; 
            font-weight: 400; 
        }
        p{
            color: #828282;
            font-size:14px;
            padding-top: 2px;
            font-weight: 400;
        }
      }
    }
    .foot_mid{
        border-bottom: 1px solid #e1e1e1;
    }
    .foot_bot{
        border-top:1px solid #f2f2f2;
        .bot_le{
            padding-top: 30px;
            font-size:12px;
            color:#c7c6c8;
            letter-spacing: 1px;
            float: left;
            a{
                color:#c7c6c8;
                >img{
                    vertical-align: top;
                }
            }
        }
        .bot_ri{
            float: right;
            text-align: center;
            padding-top: 30px;
            span{
                font-size:12px;
                color:#c7c6c8;
                letter-spacing: 1px;
                margin-left: 7px;
            }
            i{
                display: inline-block;
                width: 1px;
                height: 18px;
                margin-right: 17px;
                background-color:#c7c6c8;
                vertical-align: bottom;
            }
            a{
                color: #c7c6c8;
                font-size: 16px;
                margin-right: 16px;
                &:hover{
                    color: #898989;
                }
            }
        }
    }
    //轮播图
//  .banner_box{
//      background: #FFFFFF;
//      .banner{
//          background: url(../img/lunbo.jpg) no-repeat;
//          width: 1200px;
//          margin: 0 auto;
//          height: 512px;
//          .banner_tex{
//              float: right;
//              margin-top: 180px;
//              margin-right: 50px;
//              text-align: center;
//              h2{
//                  color: #333333;
//                  margin-bottom: 16px;
//                  font-size: 38px;
//                  line-height: 1;
//              }
//              p{
//                  line-height: 1;
//                  margin-bottom: 16px;
//                  font-size: 18px;
//                  color: #747474;  
//              }
//              >a{
//                  width: 124px;
//                  height: 36px;
//                  line-height: 36px;
//                  border-radius: 20px;
//                  margin: 0 auto;
//                  font-size: 16px;
//                  background: #05b570;
//                  color: white;
//                  display: block;
//                  margin-top: 32px;
//              }
//          }
//      }
//      
//  }
    //热销
    .zt_one{
        margin: 0 auto;
        font-weight: 400;
        text-align: center;
        margin-top: 52px;
        width: 895px;
        position: relative;
        &:hover{
            box-shadow: 10px 10px 20px #efefef;
        }
        .zt_one_wenzi{
            text-align: center;
            display: inline-block;
            right: 104px;
            top: 107px;
            position: absolute;
            .yuandian{
                margin: 0 auto;
                >li{
                list-style: none;
                width: 26px;
                height: 27px;
                line-height: 25px;
                border-radius: 50%;
                display: inline-block;
                margin-right: 5px;
                cursor: pointer;
                    >span{
                        display: inline-block;
                        width: 14px;
                        height: 15px;
                        line-height: 15px;
                        border-radius: 50%; 
                         }
                &:nth-child(1){
                    border:3px solid #b71f2e;
                    span{
                        background: #b71f2e;
                       }
                    } 
                &:nth-child(2){
//                  border: 3px solid #f7be9e;
                    span{
                        background: #f7be9e;
                        }
                    }
                &:nth-child(3){
//                  border:3px solid #3a3b3f;
                    span{
                        background: #3a3b3f;
                       }
                    }       
                }    
            }
            h3{
                margin-bottom: 15px;
                color: #929292;
                font-size: 18px;
            }
            p{
                color: #494949;
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 32px;
            }
                    >span{
                        margin-top: 52px;
                        margin-bottom: 22px;
                        display: block;
                        font-size: 20px;
                    }
            a{
                background: #05B570;
                text-align: center;
                color: white;
                display: block;
                width: 148px;
                height: 44px;
                font-size: 16px;
                border-radius: 20px;
                line-height: 44px;
                margin:0 auto; 
            }  
        }
    }
    .zt_two{
        margin: 0 auto;
        font-weight: 400;
        text-align: center;
        position: relative;
        width: 895px;
        margin-top: 20px;
        &:hover{
            box-shadow: 10px 10px 20px #efefef;
        }
        .zt_two_wenzi{
            position: absolute;
            text-align: center;
            display: inline-block;
            left: 114px;
            top: 107px;
            .yuandian2{
                margin: 0 auto;
                >li{
                list-style: none;
                width: 26px;
                height: 27px;
                line-height: 25px;
                border-radius: 50%;
                display: inline-block;
                margin-right: 5px;
                cursor: pointer;
                    >span{
                        display: inline-block;
                        width: 14px;
                        height: 15px;
                        line-height: 15px;
                        border-radius: 50%; 
                         }
                &:nth-child(1){
                    border:3px solid #f7be9e;
                    span{
                        background: #f7be9e;
                       }
                    } 
                &:nth-child(2){
//                  border: 3px solid #3a3b3f;
                    span{
                        background: #3a3b3f;
                        }
                    }     
                }
            }     
            h3{
                margin-bottom: 15px;
                color: #929292;
                font-size: 18px;
            }
            p{
                color: #494949;
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 32px;
            }
              >span{
                margin-top: 52px;
                margin-bottom: 22px;
                display: block;
                font-size:20px;
            }  
            a{
                background: #05B570;
                text-align: center;
                color: white;
                display: block;
                width: 148px;
                height: 44px;
                font-size: 16px;
                border-radius: 20px;
                line-height: 44px;
                margin: 0 auto; 
            }     
        }
    }
    //产品
    .chanpin{
        margin-top: 37px;
        text-align: center;
        width: 894px;
        margin: 0 auto;
        .chanpin_xx{
            width: 437px;
            height: 589px;
            background: white;
            margin-top: 38px;
            display: inline-block;
             &:hover{
            box-shadow: 10px 10px 20px #efefef;
            }
            .chanpin_photo{
                width: 436px;
                height: 267px;
                margin-top: 57px;
                vertical-align: middle;
                    >img{
                        width: 100%;
                    }
            }
            .color-li{
                height: 27px;
                padding-top: 54px;
                padding-bottom: 29px;
                margin: 0 auto;
                >li{
                list-style: none;
                width: 26px;
                height: 27px;
                line-height: 25px;
                border-radius: 50%;
                display: inline-block;
                margin-right: 5px;
                cursor: pointer;
                    >span{
                        display: inline-block;
                        width: 14px;
                        height: 15px;
                        line-height: 15px;
                        border-radius: 50%; 
                         }
                &:nth-child(1){
                    border:3px solid #f7be9e;
                    span{
                        background: #f7be9e;
                       }
                    } 
                &:nth-child(2){
//                  border: 3px solid #3a3b3f;
                    span{
                        background: #3a3b3f;
                        }
                    }
                &:nth-child(3){
//                  border: 3px solid #ead0a2;
                    span{
                        background: #ead0a2;
                    }
                }         
                }
             }     
            
            .zzz{
                margin-top: 29px;
                h3{
                    font-size: 26px;
                    color: #333333;
                }
                >p{
                    color: #414141;
                    font-size: 13px;
                    letter-spacing: 1px;
                    margin-top: 12px;
                    margin-bottom: 26px;
                }
                span{
                    font-size: 18px;
                    color: #606060;
                    letter-spacing: 2px;
                }
            }
        &:nth-of-type(3){
            ul{
                li{
                &:nth-child(1){
                    border:3px solid #214ca1;
                    span{
                        background: #214ca1;
                       }
                    }
                &:nth-child(2){
//                  border: 3px solid #f7be9e;
                    span{
                        background: #f7be9e;
                        }
                    }
                &:nth-child(3){
//                  border: 3px solid #3a3b3f;
                    span{
                        background: #3a3b3f;
                    }
                }              
              }
            }
        }
        }
        .you{
            margin-right: 15px;
        }
    }
   //配件
    .peijian{
        margin:0 auto;
        width:895px;
        margin-top: 32px;
        margin-bottom: 69px;
        .pj1{
            width: 437px;
            height: 383px;
            background: white;
            float: left;
             &:hover{
            box-shadow: 10px 10px 20px #efefef;
            }
            .pj1_img{
                float: right;
                width: 187px;
                height: 277px;
                overflow: hidden;
                margin-right:30px ;
                margin-top: 57px;
                >img{
                    height: 100%;
                }
            }
            .pj1_tex{
                float: left;
                width: 189px;
                text-align: center;
                margin-top: 162px;
                h3{
                    font-size:22px;
                    letter-spacing: 2px;
                    color: #575757;
                    margin-bottom: 18px;
                }
                 p{
                    font-size:18px;
                    color:#333333;
                }
            }
        }
        .pj2{
            width: 208px;
            height: 383px;
            background: white;
            float: left;
            margin-left: 18px;
            text-align: center;
            margin-bottom: 20px;
             &:hover{
                box-shadow: 10px 10px 20px #efefef;
                }
            .pj2_tex{
                letter-spacing: 1px;
                h3{
                    font-size: 15px;
                    color: #343434;
                    margin-bottom: 11px;  
                }
                p{
                    font-size: 13px;
                }
                
            }
            .pj2_img{
                margin-top: 74px;
                margin-bottom: 40px;
            }
        &:nth-of-type(4){
            margin-left: 4px;
        }
     }

    }
}
